<template>
  <div class="m-menu">
    <ul class="m-goods">
      <li v-for="(good, index) in goods" :key="index">
        <h2 class="good-title">{{ good.title }}</h2>
        <ul class="foods">
          <li class="food" v-for="(food, index_) in good.list" :key="index_">
            <img class="food-img" :src="food.imgSrc" alt="" />
            <div class="food-name">{{ food.name }}</div>
            <div class="food-ok">赞{{ food.ok }}</div>
            <div class="food-price">￥{{ food.price }}</div>
            <!--小球组件-->
            <div class="ball-wrapper"><Ball :food="food" v-on:cart-add="cartAdd"></Ball></div>
          </li>
        </ul>
      </li>
    </ul>
    <!--购物车组件-->
    <div class="m-cart-wrapper"><Cart ref="cart" :foods="foods" :shop="shop"></Cart></div>
  </div>
</template>

<script>
import Cart from '@/components/shop/cart/cart.vue';
import Ball from '@/components/shop/ball/ball.vue';
import Axios from 'axios';
import Vue from 'vue';

export default {
  props: {
    shop: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      goods: [],
      foods: []
    };
  },
  created() {
    Axios.get('/goods').then(resp => {
      this.goods = resp.data;
      // 将所有的商品 push 到 foods中
      this.goods.forEach(good => {
        good.list.forEach(food => {
          Vue.set(food, 'count', 0); // 添加绑定属性
          this.foods.push(food);
        });
      });
    });
  },
  computed: {},
  methods: {
    cartAdd(el) {
      this.$refs.cart.drop(el);
    }
  },
  components: {
    Cart,
    Ball
  }
};
</script>

<style lang="stylus" rel="stylussheet/stylus">
.m-menu
  position relative
  width 100%
  .m-goods
    width 660px
    .good-title
      width 100%
      margin-top 14px
      height 50px
      line-height 50px
      font-size 14px
      color black
      padding-left 19px
      box-sizing border-box
      border-bottom 1px solid rgba(7, 17, 27, 0.1)
      background-color #fff
    .foods
      width 100%
      font-size 0
      .food
        display inline-block
        position relative
        width 220px
        height 252px
        box-sizing border-box
        border 1px dashed rgba(7, 17, 27, 0.1)
        text-align center
        background-color #fff
        cursor pointer
        padding-top 20px
        &:hover
          background-color rgba(7, 17, 27, 0.1)
        .food-img
          width 170px
          height 127px
        .food-name
          display block
          width 100%
          text-overflow ellipsis
          overflow hidden
          white-space nowrap
          font-size 14px
          font-weight 700
          text-align left
          padding-left 19px
          margin-top 12px
        .food-ok
          margin 14px auto 0
          margin-top 10px
          height 16px
          font-size 12px
          color #999
          text-align left
          padding-left 25px
        .food-price
          font-size 14px
          font-weight 700
          color red
          text-align left
          padding-left 19px
          margin-top 8px
        .ball-wrapper
          position absolute
          right 19px
          bottom 30px
  .m-cart-wrapper
    position fixed
    z-index 999
    bottom 0
    right 50px
    width 320px
</style>
